<template>
  <div class="chat-panel">
    <div class="chat-messages" ref="msgBox">
      <div v-for="(msg, idx) in messages" :key="idx" class="chat-msg">
        <span class="nickname">{{ msg.nickname }}：</span>
        <span>{{ msg.text }}</span>
      </div>
    </div>
    <el-input v-model="input" placeholder="输入聊天内容..." @keyup.enter="send" size="small" />
    <el-button type="primary" size="small" @click="send" style="margin-top: 4px; width: 100%;">发送</el-button>
  </div>
</template>
<script lang="ts" setup>
import { ref, nextTick, defineProps } from 'vue'
const props = defineProps<{ messages: { nickname: string; text: string }[] }>()
const input = ref('')
const msgBox = ref<HTMLElement | null>(null)
function send() {
  if (!input.value) return
  // 由父组件处理 emit
  emit('send', input.value)
  input.value = ''
  nextTick(() => {
    if (msgBox.value) msgBox.value.scrollTop = msgBox.value.scrollHeight
  })
}
const emit = defineEmits(['send'])
</script>
<style scoped>
.chat-panel {
  background: #222;
  border-radius: 8px;
  padding: 8px;
  width: 260px;
  position: absolute;
  right: 24px;
  bottom: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.chat-messages {
  max-height: 180px;
  overflow-y: auto;
  margin-bottom: 8px;
  background: #333;
  border-radius: 4px;
  padding: 6px;
}
.chat-msg {
  margin-bottom: 4px;
  color: #fff;
}
.nickname {
  color: #ffd700;
}
</style> 